<template>
	<div>
		<div class="container">
			<div class="handle-box">
<!--				<el-select v-model="query.ciga_type" placeholder="卷烟类型" class="handle-select mr10" @change="handleSearch(query.ciga_type,query.ciga_variety)">-->
<!--					<el-option key="1" label="真烟" value="真品卷烟"></el-option>-->
<!--					<el-option key="2" label="假烟" value="假烟"></el-option>-->
<!--				</el-select>-->
				<el-input v-model="query.ciga_variety" placeholder="烟草名称" class="handle-input mr10" @change="handleSearch(query.ciga_type,query.ciga_variety)" ></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch(query.ciga_type,query.ciga_variety)">搜索</el-button>
				<el-button type="primary" :icon="Plus" @click="create_ciga">新增</el-button>
			</div>
			<el-table :data="tableList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
<!--				<el-table-column prop="ciga_id" label="ID" width="55" align="center"></el-table-column>-->
				<el-table-column prop="ciga_category" width="150" align="center" label="卷烟种类" ></el-table-column>
        <el-table-column prop="ciga_variety" label="品种" width="270" align="center"></el-table-column>
        <el-table-column prop="barcode" label="条形码" align="center"></el-table-column>
        <el-table-column prop="ciga_model" label="规格型号" align="center"></el-table-column>
				<el-table-column label="价格" align="center">
					<template #default="scope">￥{{ scope.row.ciga_price }}</template>
        </el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="handleEdit(scope.row)" >
							修改
						</el-button>
						<el-button text :icon="Edit" class="red" @click="DeleteTobacco(scope.$index,scope.row)" >
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

    <!-- 新增香烟弹出框 -->
    <el-dialog title="添加卷烟信息" v-model="createVisible"  width="40%">
      <el-form label-width="120px">
        <el-form-item label="卷烟类型">
          <el-input placeholder="卷烟类型（真品国产卷烟、进口烟、假烟、走私烟等）" v-model="create.ciga_type"></el-input>
        </el-form-item>
        <el-form-item label="卷烟品种">
          <el-input v-model="create.ciga_variety"></el-input>
        </el-form-item>
        <el-form-item label="条形码">
          <el-input pl v-model="create.barcode"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="create.ciga_model"></el-input>
        </el-form-item>
        <el-form-item label="卷烟价格">
          <el-input v-model="create.ciga_price"></el-input>
        </el-form-item>
		  <el-form-item label="烟草品种类别" >
			  <el-input placeholder="烟草品种类别(雪茄、烤烟等)" v-model="create.ciga_category"></el-input>
		  </el-form-item>
		  <el-form-item label="包装形式">
			  <el-input v-model="create.packaging_form"></el-input>
		  </el-form-item>
		  <el-form-item label="烟草生产厂家">
			  <el-input v-model="create.ciga_industry"></el-input>
		  </el-form-item>
		  <el-form-item label="自然条包装支数">
			  <el-input v-model="create.quantity"></el-input>
		  </el-form-item>
		  <el-form-item label="价格标识" >
			  <el-input placeholder="价格标识(元/条、元/支)" v-model="create.price_sign"></el-input>
		  </el-form-item>
<!--		  <el-form-item label="启用日期">-->

<!--			  <el-date-picker v-model="create.start_date"  type="datetime" placeholder="选择启用日期" value-format="YYYY-MM-DD HH:mm:ss">-->
<!--			  </el-date-picker>-->
<!--		  </el-form-item>-->
<!--		  <el-form-item label="禁用日期">-->
<!--			  <el-date-picker v-model="create.end_date"  type="datetime" placeholder="选择禁用日期" value-format="YYYY-MM-DD HH:mm:ss">-->
<!--			  </el-date-picker>-->
<!--		  </el-form-item>-->
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="createVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveCreate">确 定</el-button>
				</span>
      </template>
    </el-dialog>

		<!-- 编辑弹出框 -->
		<el-dialog title="修改卷烟信息" v-model="editVisible"  width="40%">
			<el-form label-width="120px">
				<el-form-item label="卷烟类型">
					<el-input v-model="form.ciga_type"></el-input>
				</el-form-item>
        <el-form-item label="卷烟品种">
          <el-input v-model="form.ciga_variety"></el-input>
        </el-form-item>
        <el-form-item label="条条形码">
          <el-input v-model="form.barcode"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="form.ciga_model"></el-input>
        </el-form-item>
				<el-form-item label="卷烟价格">
					<el-input v-model="form.ciga_price"></el-input>
				</el-form-item>
				<el-form-item label="烟草品种类别" >
					<el-input placeholder="烟草品种类别(雪茄、烤烟等)" v-model="form.ciga_category"></el-input>
				</el-form-item>
				<el-form-item label="包装形式">
					<el-input v-model="form.packaging_form"></el-input>
				</el-form-item>
				<el-form-item label="烟草生产厂家">
					<el-input v-model="form.ciga_industry"></el-input>
				</el-form-item>
				<el-form-item label="自然条包装支数">
					<el-input v-model="form.quantity"></el-input>
				</el-form-item>
				<el-form-item label="价格标识" >
					<el-input placeholder="价格标识(元/条、元/支)" v-model="form.price_sign"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="table_jy">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import {fetchData_tobacco, legal_clause_delete, tobacco_Create, tobacco_delete, tobacco_Edit} from '../api/index';

interface TableItem {
  ciga_id: number;
  ciga_type: string;
  ciga_variety: string;
  barcode: string;
  ciga_model: string;
  ciga_price: number;
  ciga_category:string;
}

const query = reactive({
  ciga_type:'',
  ciga_variety: '',
	pageIndex: 1,
	pageSize: 10
});



const tableData = ref<TableItem[]>([]); // 接口返回的全部数据
const tableList = ref<TableItem[]>([]); // 用于存放分页数据的列表
const pageTotal = ref(0);
// 获取表格数据
const getData = (ciga_type:string='', ciga_variety:string='' ,ciga_model:string='') => {
  fetchData_tobacco(ciga_type,ciga_variety,ciga_model).then(res => {
    tableList.value = [];
		tableData.value = res.data.data;
		pageTotal.value = res.data.data.length || 50;
    // 根据页码确定下标位置
    const index: number = query.pageIndex * query.pageSize - query.pageSize;
    for (let i = index; i < index + query.pageSize; i++) {
      // 防止数组下标越界
      if (i <= tableData.value.length - 1) {
        tableList.value.push(tableData.value[i])
      } else {
        // 越界就不再循环
        break;
      }
    }
	});
};
getData();

// 查询操作
const handleSearch = (ciga_type:string='',ciga_variety:string='') => {
	query.pageIndex = 1;
  getData(ciga_type,ciga_variety);
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
	getData();
};

// 表格编辑时弹窗和保存
const createVisible = ref(false);
const create_ciga = ()=>{
  createVisible.value = true;
}
const DeleteTobacco=(index:number,row:any)=>{
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	}).then(() => {
		tobacco_delete(row.ciga_id).then(res=>{
			if (res.data.message === "success"){
				tableData.value.splice(index, 1);
				getData();
				ElMessage.success('删除成功');

			}else {
				ElMessageBox.confirm('删除失败', '提示', {
					type: 'warning'
				})
			}
		})
	})
			.catch(() => {});
}

let create = reactive({
  ciga_id: 0,
  ciga_type: '',
  ciga_variety: '',
  barcode: '',
  ciga_model: '',
  ciga_price: 0,
  ciga_category:'',
  packaging_form:'',
  ciga_industry:'',
  quantity:'',
  price_sign:'',
  start_date:'',
  end_date:'',
});
const saveCreate = () =>{
	if (create.ciga_type.length==0){
		alert("请输入卷烟类型")
	}else if(create.ciga_variety.length==0){
		alert("请输入卷烟品种")
	}else if(create.barcode.length==0){
		alert("请输入条形码")
	}else if(create.ciga_model.length==0){
		alert("请输入规格型号")
	}else if((create.ciga_price).toString().length==0){
		alert("请输入卷烟价格")
	}else if(create.ciga_category.length==0){
		alert("请输入卷烟品种类别")
	}else if(create.packaging_form.length==0){
		alert("请输入包装形式")
	}else if(create.ciga_industry.length==0){
		alert("请输入烟草生产产家")
	}else{
		tobacco_Create(
				create.ciga_type,
				create.ciga_variety,
				create.barcode,
				create.ciga_model,
				create.ciga_price,
				create.ciga_category,
				create.packaging_form,
				create.ciga_industry,
				create.quantity,
				create.price_sign,
				// create.start_date,
				// create.end_date,
	).then(res=>{
			if (res.data.message ==="success"){
				ElMessage.success(`添加卷烟成功`);
				createVisible.value=false;
				getData();
			}else {
				ElMessageBox.confirm('添加失败', '提示', {
					type: 'warning'
				})
			}
		})
	}

}

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
  ciga_id: 0,
  ciga_type: '',
  ciga_variety: '',
  barcode: '',
  ciga_model: '',
  ciga_price: 0,
	ciga_category:'',
	packaging_form:'',
	ciga_industry:'',
	quantity:'',
	price_sign:'',
});
let idx: number = -1;
const handleEdit = (row: any) => {
	form.ciga_id = row.ciga_id;
  form.ciga_type = row.ciga_type;
  form.ciga_variety = row.ciga_variety;
  form.barcode = row.barcode;
  form.ciga_model = row.ciga_model;
  form.ciga_price = row.ciga_price;
  form.ciga_category= row.ciga_category,
  form.packaging_form= row.packaging_form,
  form.ciga_industry= row.ciga_industry,
  form.quantity= row.quantity,
  form.price_sign= row.price_sign,

	editVisible.value = true;
};
const saveEdit = () => {
	editVisible.value = false;
  tobacco_Edit(
      form.ciga_id,
      form.ciga_type,
      form.ciga_variety,
      form.barcode,
      form.ciga_model,
      form.ciga_price,
	  form.ciga_category,
	  form.packaging_form,
	  form.ciga_industry,
	  form.quantity,
	  form.price_sign
  ).then(res=>{
    if (res.data.message ==="success"){
      ElMessage.success(`修改成功`);
      getData();
    }else {
      ElMessageBox.confirm('修改失败', '提示', {
        type: 'warning'
      })
    }
  });

};

</script>



<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.handle-box button{
	background-color: #00a854;
}

.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
/*.pagination current-page{*/
/*	background-color: #00a854;*/
/*}*/

/*.el-pagination.is-background.el-pager li:not(.disabled).active{*/
/*	background-color:green;!*进行修改选中项背景和字体*!*/
/*	color:green;*/
/*}*/
/*.el-pagination.is-background .el-pager li:hover{*/
/*	color: #8bc34a !important;!*hover时候的文字颜色*!*/
/*}*/
/*.el-pager li.active{*/
/*	color:green !important;!*仅设置active时的文字颜色*!*/
/*}*/

/*.el-pagination.is-background {*/
/*	background: #fff;*/
/*	color: #fff;*/
/*}*/
/*.el-pagination.is-background.active {*/
/*	background: #00a854;*/
/*	color: #fff;*/
/*}*/
/*.el-pagination.is-background .el-pagerli:not(.disabled) {*/
/*	    background-color: #fff; */
/*        color: #fff;*/
/*	  }*/

/*.el-pagination.is-background.el-pagerli:not(.disabled).active {*/
/*	    background-color: green; */
/*    	color: #fff;*/
/*	  }*/
.dialog-footer button{
	background-color: #00a854;
	color:white;
}
</style>
